<template>
  <div>
<!--    面包屑导航区-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/users' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户系统</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
<!--    卡片视图-->
    <el-card class="box-card">
<!--      搜索-->
      <el-row :gutter="20">
        <el-col :span="8">
            <el-input placeholder="请输入账号"  class="input-with-select" v-model="quryInfo.query" clearable @clear="getUserList">
              <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
            </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">添加用户</el-button>
        </el-col>
      </el-row>
<!--      列表区-->
      <el-table
        :data="userList"
        :border="true"
        :stripe="true"
        style="width: 100%">
        <el-table-column type="index">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱">
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄">
        </el-table-column>
        <el-table-column
          prop="loginName"
          label="账号">
        </el-table-column>
        <el-table-column
          label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.enabled == '1' ? true : false" @change="userStateChanged(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          width="180px"
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
            <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
            </el-tooltip>

          </template>
        </el-table-column>
      </el-table>
<!--      分页区域-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="quryInfo.pagenum"
        :page-sizes="[1,2,5,10,20,50,100]"
        :page-size="quryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
    export default {
        name: "users",
        data(){
          return{
            quryInfo:{
                query:'',
                //当前页
                pagenum:1,
                pagesize:2
            },
            userList:[],
            total:0,

          }
        },
        created() {
            this.getUserList();
        },
        methods:{
            userStateChanged(userInfo){
      console.log(userInfo)
                this.$http({
                    url:`/users/${userInfo.userId}/state/${userInfo.enabled}`,
                    method:'put'
                }).then(res=>{
                    console.log(res);
                    if(userInfo.enabled == 0){
                        userInfo.enabled = 1;
                    }else{
                        userInfo.enabled = 0;
                    }
                    if (res.code !== 200) {
                        return this.$message.error({
                            showClose: true,
                            message: '更新成功。'
                        });
                    }
                }).catch(err=>{
                    return this.$message.error({
                        showClose: true,
                        message: '更新失败。'
                    });
                })
            },
            handleCurrentChange(newPage){
                console.log(newPage)
                this.quryInfo.pagenum = newPage;
                this.getUserList();
            },
            handleSizeChange(newSize){
              console.log(newSize)
                this.quryInfo.pagesize = newSize;
              this.getUserList();
            },
            getUserList(){
                this.$http({
                    url:'/users/getUserList',
                    method:'get',
                    params: this.quryInfo
                }).then(res=>{
                    console.log(res);
                    if (res.code !== 200) {
                        return this.$message.error({
                            showClose: true,
                            message: '用户列表获取失败。'
                        });
                    }
                    this.userList = res.data.records;
                    this.total = res.data.total;
                    console.log("total:"+this.total)
                }).catch(err=>{
                    return this.$message.error({
                        showClose: true,
                        message: '用户列表获取失败。'
                    });
                })

              // const {data:res} = await this.$http.get('/users/getUserList',{
              //     params: this.quryInfo
              // });
              // console.log(res);
              // if(res.code !== 200){
              //     return this.$message.error({
              //         showClose: true,
              //         message: '用户列表获取失败。'
              //     });
              // }

            }
        }
    }
</script>

<style lang="less" scoped>
  .el-breadcrumb{
    margin-bottom: 15px;
    font-size: 12px;
  }
  .el-card{
    box-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
  }
  .el-table{
    margin-top: 15px;
    font-size: 12px;
  }
  .el-pagination{
    margin-top: 15px;
  }
</style>